.site-icon {
	position: relative;
	overflow: hidden;
	align-self: center;
	margin: 0;
	text-align: center;

	// Globe icon for sites without an icon
	&.is-blank,
	&.is-primary {
		display: flex;
		align-items: center;
		justify-content: center;

		.gridicon {
			color: var(--color-surface);
			z-index: z-index("root", ".site-icon.is-blank .gridicon");
		}
	}

	&.is-blank {
		background: var(--color-neutral-10);
	}

	&.is-primary {
		background: var(--color-primary);
	}
}

.site-icon.is-transient .spinner {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: color-mix(in srgb, var(--color-surface) 75%, transparent);
}

.site-icon__img {
	background: var(--color-surface);
	border-radius: 4px;
	outline: 1px solid rgba(0, 0, 0, 0.04);
	outline-offset: -1px;
	position: relative;
}
